<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>首页</title>
  </head>
  <body class="backgroundImage">
    <div id="app" style="display:none"></div>
    <div>
      <div class="two">
        <div ontouchstart id="body">
          <img class="logo" src="./img/123.jpg" alt="图片加载失败" />
          <div class="weui-footer">
            <p class="weui-footer__text" style="font-weight: 800;">万物之灵之首，应负万物之灵之责</p>
          </div>
          <div class="container">
            <div class="orbit orbit-1">关爱</div>
            <div class="orbit orbit-2">帮助</div>
            <div class="orbit orbit-3">守护</div>
            <div class="orbit orbit-4">救赎</div>
            <div class="orbit orbit-5">一生</div>
            <div class="orbit orbit-6">陪伴</div>
          </div>
          <div class="circle"></div>
          <div class="star star-1"></div>
          <div class="star star-2"></div>
        </div>
      </div>
    </div>
    <script type="module" src="/src/main.js"></script>
    <script src="./jquery.min.js"></script>
    <script>
      setTimeout(() => {
        document.querySelector('.two').style.display = 'none'
        document.querySelector('#app').style.display = 'inline'
      },3000)
    </script>
  </body>
  
  <style>
.backgroundImage{
    background-image: url(./img/123.jpg);
    background-repeat:no-repeat;
	background-attachment:fixed;
	background-size:cover;
    }

    .two #body {
    background: url(../images/group.png) no-repeat;
    background-size: 100%;
    overflow: hidden;
}
.two #body:before {
    content: '';
    display: table;
}
.two .logo {
    display: block;
    margin: 226px auto 0;
    width: 168px;
    border-radius: 999px;
}
.two .weui-footer {
    margin-top: 30px;
    font-size: 14px;
    color: #000;
}
.two .container {
    position: absolute;
    top: 199px;
    left: 50%;
    margin-left: -111px;
    width: 222px;
    height: 222px;
}
.two .orbit {
    width: 2px;
    height: 2px;
    background: #F6B42C;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 9;
}
.two .orbit-1 {
    width: 4px;
    height: 4px;
    -webkit-animation: orbit-1 5s linear infinite;
    animation: orbit-1 5s linear infinite;
}
.two .orbit-2 {
    width: 5px;
    height: 5px;
    -webkit-animation: orbit-2 10s linear infinite;
    animation: orbit-2 10s linear infinite;
}
.two .orbit-3 {
    width: 3px;
    height: 3px;
    -webkit-animation: orbit-3 15s linear infinite;
    animation: orbit-3 15s linear infinite;
}
.two .orbit-4 {
    -webkit-animation: orbit-4 20s linear infinite;
    animation: orbit-4 20s linear infinite;
}
.two .orbit-5 {
    width: 6px;
    height: 6px;
    -webkit-animation: orbit-5 25s linear infinite;
    animation: orbit-5 25s linear infinite;
}
.two .orbit-6 {
    -webkit-animation: orbit-6 30s linear infinite;
    animation: orbit-6 30s linear infinite;
}
@keyframes orbit-1 {
    0% {
        -webkit-transform: rotate(0deg) translateX(-95px) rotate(0deg);
        transform: rotate(0deg) translateX(-95px) rotate(0deg);
    }
    100% {
       -webkit-transform: rotate(360deg) translateX(-95px) rotate(-360deg);
        transform: rotate(360deg) translateX(-95px) rotate(-360deg);
    }
}
@keyframes orbit-2 {
    0% {
        -webkit-transform: rotate(0deg) translateX(-110px) rotate(0deg);
        transform: rotate(0deg) translateX(-110px) rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg) translateX(-110px) rotate(-360deg);
        transform: rotate(360deg) translateX(-110px) rotate(-360deg);
    }
}
@keyframes orbit-3 {
    0% {
        -webkit-transform: rotate(0deg) translateX(95px) rotate(0deg);
        transform: rotate(0deg) translateX(95px) rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg) translateX(95px) rotate(-360deg);
        transform: rotate(360deg) translateX(95px) rotate(-360deg);
    }
}
@keyframes orbit-4 {
    0% {
        -webkit-transform: rotate(0deg) translateX(110px) rotate(0deg);
        transform: rotate(0deg) translateX(110px) rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg) translateX(110px) rotate(-360deg);
        transform: rotate(360deg) translateX(110px) rotate(-360deg);
    }
}
@keyframes orbit-5 {
    0% {
        -webkit-transform: rotate(0deg) translateX(125px) rotate(0deg);
        transform: rotate(0deg) translateX(125px) rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg) translateX(125px) rotate(-360deg);
        transform: rotate(360deg) translateX(125px) rotate(-360deg);
    }
}
@keyframes orbit-6 {
    0% {
        -webkit-transform: rotate(0deg) translateX(140px) rotate(0deg);
        transform: rotate(0deg) translateX(140px) rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg) translateX(140px) rotate(-360deg);
        transform: rotate(360deg) translateX(140px) rotate(-360deg);
    }
}
.two .circle {
    position: absolute;
    bottom: -80px;
    left: -30px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: #d9d9d9;
    opacity: .8;
    animation: trail 10s linear infinite;
}
@keyframes trail {
    0% {
        -webkit-transform: rotate(0deg) translateX(60px) rotate(0deg);
        transform: rotate(0deg) translateX(60px) rotate(0deg);
    }
    25% {
        -webkit-transform: rotate(0deg) translateY(60px) rotate(0deg);
        transform: rotate(0deg) translateY(60px) rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg) translateX(60px) rotate(-360deg);
        transform: rotate(360deg) translateX(60px) rotate(-360deg);
    }
}
.two .star {
    position: absolute;
    left: 0;
    top: 50px;
    width: 1px;
    height: 1px;
    background-color: white;
    transform: rotate(30deg);
    -webkit-animation: shooting 5s linear infinite;
    animation: shooting 5s linear infinite;
}
.two .star:before {
    content: "";
    position: absolute;
    width: 100px;
    height: 1px;
    right: 1px;
    top: 0;
    background: -webkit-linear-gradient(left, transparent 0%, rgba(255, 255, 255, 0.4) 100%);
    background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.4) 100%);
}
.two .star-2 {
    top: 200px;
    -webkit-animation: shootings 8s 1s linear infinite;
    animation: shootings 8s 1s linear infinite;
}
@keyframes shooting {
    0% {
        left: -100px;
    }
    100% {
        top: 350px;
        left: calc(100% + 100px);
    }
}
@keyframes shootings {
    0% {
        left: -100px;
    }
    100% {
        top: 500px;
        left: calc(100% + 100px);
    }
}
  </style>
</html>
